import React, { useLayoutEffect, useState, useRef, useEffect } from 'react';
// import ReactDOM from './react-dom';

const Animate = () => {
  const ref = useRef();
  const [count, setCount] = useState(0);
  useLayoutEffect(() => { // useLayoutEffect使用可以避免渲染闪烁问题,你可以尝试使用useEffect看看效果
    if (count === 0) {
      const randomNum = 10 + Math.random() * 200
      setCount(10 + Math.random() * 200);
    }
  }, [count]);

  // React.useLayoutEffect(() => {// 在浏览器绘制之前执行
  //   // 浏览器绘制之前已经把位置改变了
  //   ref.current.style.transform = `translate(500px)`;//TODO
  //   ref.current.style.transition = `all 500ms`;
  // });
  let style = {
    width: '100px',
    height: '100px',
    borderRadius: '50%',
    backgroundColor: 'red'
  }
  return (
    <>
      <div style={style} ref={ref}></div>
      <div onClick={() => setCount(0)}>{count}</div>
    </>
  )
}

export default Animate